<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>多光谱相机</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bbfont.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="qv.css">
    <!--  <link rel="stylesheet" href="qv-hist.css">-->
    <style>
        #window {
            fill: #fff7;
            stroke: #fc5151;
            stroke-width: 2;
        }

        #target * {
            fill: #007bff;
            stroke: #27dbea;
            stroke-width: 2;
        }
    </style>
</head>
<body id="viewer" class="M1">
<div id="CCC" style="padding: 4px 6px;">
    <button class="btn btn-primary btn-sm disactive-btn" onclick="main.realtime()" id="realtime">实时</button>
    <button class="btn btn-primary btn-sm mx-1" id="history" onclick="main.history()">历史</button>
    日期:
    <input id="day" type="date" value="2024-01-15">
    任务:
    <select id="task" class="sele-comp">
    </select>
    图像模式:
    <select id="modes" class="sele-comp" onchange="main.onMode()"></select>
    最大帧: <label id="frm_max"></label>
    数据帧:
    <input id="frm_input" oninput="this.nextElementSibling.value=this.value" style="min-width: 60px" type="number">
    <input oninput="this.previousElementSibling.value=this.value"
           id="frm_range" type="range" min="0" max="0" value="0" step="1" style="max-width: 400px;">
    <div class="flex-grow-1"></div>
    <button class="btn btn-primary btn-sm" onclick="main.exportCSV(this)"><i class="fa fa-file-text"></i>下载帧信息</button>
</div>
<div class="d-flex d-flex flex-row" style="height: calc(100vh - 37px)">
    <div class="history position-relative">
        <div id="thumbs" class="h-100 w-100 p-1 position-absolute" style="overflow-y: auto">
        </div>
    </div>
    <div class="flex-grow-1 d-flex flex-column">
        <div id="ctrl" class="d-flex flex-row bg-light" style="height: 28px">
            <a class="fa fa-image btn  btn-r" onclick="$dld(main.cur_task,main.cur_frame.name+'.jpg')"></a>
            <!--      <a class="fa fa-download btn  btn-r" onclick="$dld(main.cur_task,main.cur_frame.name+'.tif')"></a>-->
            <label title="对比度" class="btn-r btn "><i class="fa fa-adjust"></i>
                <input type="range" value="1" min="0" max="2" step="0.01"></label>
            <label title="亮度" class="btn-r btn "><i class="fa fa-sun-o "></i>
                <input type="range" value="1" min="0" max="2" step="0.01"></label>
            <label title="色调" class="btn-r btn visually-hidden"><i class="fa fa-dashboard "></i>
                <input type="range" value="0" min="0" max="360"> </label>
            <label title="饱和度" class="btn-r btn  visually-hidden"><i class="fa fa-certificate "></i>
                <input type="range" value="1" min="0" max="2" step="0.01"> </label>
            <button title="重置" class="btn-r btn " onclick="reset()">
                <i class="fa fa-refresh"></i>
                <i class="fa fa-circle-half"></i>
            </button>
            <span id="pos"></span>
            <span id="info"></span>

        </div>
        <div id="img-viewer" class="flex-grow-1">
            <div class="x-viewer" style="position: absolute;height: 100%;width: 100%;overflow: hidden">
                <img class="x-scale" id="frame_img" alt="" src=""></div>
        </div>
    </div>
    <div class="d-flex flex-column" style="width: 350px">
        <div class="card-header">
            数据
        </div>
        <div class="flex-grow-1  position-relative">
            <div class="position-absolute h-100 w-100" style="overflow-y: auto">
                <table id="params" class="table table-sm table-hover"></table>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js?12"></script>
<script src="qv.js"></script>
<script src="cam-qv.js"></script>
<script>
    const ParamConst = {
        sbn: {
            0x09: '全色通道',
            0x01: 'CH1通道',
            0x02: 'CH2通道',
            0x03: 'CH3通道',
            0x04: 'CH4通道',
            0x05: 'CH5通道',
            0x06: 'CH6通道',
            0x07: 'CH7通道',
            0x08: 'CH8通道'

        },
        epmod: {
            0x5A: '自动曝光',
            0xA5: '手动曝光'
        },
        fcs: {
            0x5A: '自动调焦',
            0xA5: '手动调焦'
        },
        fclv: {
            0x01: '第1准焦位置',
            0x02: '第2准焦位置',
            0x03: '第3准焦位置',
            0x04: '第4准焦位置',
            0x05: '第5准焦位置',
            0x06: '第6准焦位置'
        },
        fcw: {
            0x00: '调焦轮零位检测正常',
            0x0F: '调焦轮零位检测A正常',
            0xF0: '调焦轮零位检测B正常',
            0xFF: '调焦轮零位检测异常'
        },
        ftw: {
            0x00: '滤光轮零位检测正常',
            0x0F: '滤光轮零位检测A正常',
            0xF0: '滤光轮零位检测B正常',
            0xFF: '滤光轮零位检测异常'
        }
    }


    // MODE = {
    //     0x0: '直通',
    //     0xE2: '2:1抽样',
    //     0xE4: '4:1抽样',
    //     0xE8: '8:1抽样',
    //     0x2F: '1024*1024开窗',
    //     0x4F: '512*512开窗',
    //     0x8F: '256*256开窗'
    // }

    BSF = {
        0x00: '直通帧', 0xe2: '2:1抽样', 0xe4: '4:1抽样', 0xe8: '8:1抽样', 0x2f: '1024x1024开窗', 0x4f: '512x512开窗',
        0x8f: '256x256开窗', 0x11: '无损压缩', 0x22: '2:1压缩', 0x33: '3:1压缩', 0x44: '4:1压缩', 0x55: '5:1压缩', 0x66: '6:1压缩',
        0x77: '7:1压缩', 0x88: '8:1压缩', 0xcc: '12:1压缩'
    }
    MODE = BSF

    let params = [
        {n: "帧同步头", k: "header", v: new RawFmt('6X').X, r: '6X'},
        {n: "图像类型", k: "imgtype", v: new RawFmt('1X').X, r: '1X'},
        {n: "图像模式", v: v => BSF[v], k: "mod", r: '4X'},
        {n: "帧长度",  k: "frmlen", r: '4X'},
        {n: "帧序号",  k: "frmno", r: '2X'},
        {n: "包类型标识", k: "cts", v: new RawFmt('4X').X, r: '4X'},
        {n: "包长度", k: "pkgl", r: '4X'},
        {n: "图像帧起始标识", v: new RawFmt('8X').X, k: "tsi", r: '8X'},
        {n: "图像时间码", k: "ts", v: BJT},
        {n: "载荷ID", k: "pid", r: '2X'},
        {n: "多光谱相机控温点主份",  v: XFMT_Fixed(), k: "ctvm", r: '2X'},
        {n: "谱段号", k: "sbn", v: v => ParamConst.sbn[v], r: '2X'},
        {n: "曝光方式", k: "epmod", v: v => ParamConst.epmod[v], r: '2X'},
        {n: "曝光档位", k: "eplv", r: '2X'},
        {n: "调焦方式", k: "fcs", v: v => ParamConst.fcs[v], r: '2X'},
        {n: "调焦档位", k: "fclv", v: v => ParamConst.fclv[v], r: '2X'},
        {n: "调焦轮状态", k: "fcw", v: v => ParamConst.fcw[v], r: '2X'},
        {n: "滤光轮状态", k: "ftw", v: v => ParamConst.ftw[v], r: '2X'},
        {n: "CMOS温度码", k: "cmos", v: XFMT_Fixed(), r: '2X'},
        {n: "拍照指令计数", k: "pcnt", r: '2X'},
        {n: "图像帧计数", k: "fcnt", r: '2X'},
        {n: "探测距离", k: "detr", r: '4X'},
    ]
    class XPage extends CamViewer{
      constructor() {
        super("AMSC", params);
      }
      renderMode() {
        let r = {};
        let selected = this.$mode.value
        this.frames_ori.forEach((v) => r[v.mode] = (r[v.mode] || 0) + 1)
        let fr = Object.keys(r).filter(v => (MODE[v] && [v])).map(v => `<option value="${v}">${MODE[v]} / ${r[v]}</option>`)
        $('#modes').html(`<option value="-1">不限</option>` + fr.join(''));

        if (selected && r[selected]) {
          this.$mode.value = selected
          return
        }
        this.$mode.selectedIndex = 0
      }
      filter_frames(mode) {
        this.frames = mode ? this.frames_ori.filter(
          v => (mode === undefined || mode==-1 || v.mode == mode)
        ).map(
          (v, i) => Object.assign(v, {frm_: i})
        ): this.frames_ori.map((v,i)=>Object.assign(v, {frm_: i}))
        this.resetFrmInput()
        this.set_thumbs()
      }
    }
    var main = new XPage()
    main.realtime()
</script>
</body>
</html>
